<style src="../css/exchange.css" scoped>
.aa {
	padding: 6vh 0 10vh;
}
</style>
<template>
	<div id="exchange" class="appPidding">
		<top-bar title="积分商城" notBack="true" />
		<div class="">
			<div class="banner">
				<img class="b-img" src="../img/banne2.jpg" />
			</div>
			<div class="banners">
				<img
					class="banner-img"
					src="../img/rexiao.jpg"
					@click="toSelectCommodity(0)"
				/>
				<img
					class="banner-img"
					src="../img/xinpin.jpg"
					@click="toSelectCommodity(1)"
				/>
			</div>
			<div class="select" @click="toSelectCommodity(-1)">
				<van-icon name="search" size="14" color=" #50AEF6" />
				<span class="select-text">搜索礼品</span>
			</div>
			<div class="scroll-X" scroll-x="true" scroll-left="120">
				<div
					id="demo1"
					class="X-item"
					:class="[{ isselect: item.id == current }]"
					@click="chooseTabs(item)"
					v-for="item in tabs"
					:key="item.id"
				>
					{{ item.name }}
				</div>
			</div>
		</div>
		<div class="border-aa" />
		<div class="tabs-item">
			<div class="tabs-head">
				<div class="btn" @click="latest" :class="{ active: isActive == 0 }">
					最新
				</div>
				<div
					class="btn"
					@click="priceSort"
					:class="[{ active: isActive == 1 }, { active: isActive == 2 }]"
				>
					价格
					<div class="box-icon">
						<div class="up" :class="{ active1: isActive == 1 }"></div>
						<div class="down" :class="{ active2: isActive == 2 }"></div>
					</div>
				</div>
			</div>
			<div class="tabs-conter">
				<div class="box-item" v-if="commodityList2.length != 0">
					<div
						class="item-box"
						@click="toProductDescription(item)"
						v-for="(item, index) in commodityList2"
						:key="index"
					>
						<div class="item-img">
							<img v-if="item.goods_img" :src="item.goods_img" />
							<img v-else src="../img/z.jpg" />
						</div>
						<div class="item-title">
							<text class="text-1">{{ item.goods_name }}</text>
							<text class="text-2">消耗积分:{{ item.exchange_integral }}</text>
						</div>
						<div class="sumber">剩余数量：{{ parseInt(item.goods_num) }}个</div>
						<img
							class="add-img"
							src="../img/add.png"
							@click.stop="addNum(item)"
						/>
					</div>
				</div>
				<div class="nullData" v-else>暂无商品!</div>
			</div>
		</div>
		<div class="shop" @click="toShoppingCar">
			<van-badge
				:show-zero="false"
				class="uni-badge-left-margin"
				:content="num"
				max="99"
				:offset="[-6, 13]"
			>
				<img class="shop-img" src="../img/shop2.png" />
			</van-badge>
		</div>
		<bottom-bar :active="1" />
	</div>
</template>
<script>
import topBar from "@/components/topBar.vue"; //顶部导航栏
import bottomBar from "@/components/bottomBar.vue"; //底部导航
export default {
	components: { topBar, bottomBar },
	data: () => ({
		store: "", //门店
		userData: [], //用户数据
		num: 0, //购物车数值
		dynamincList: [], //动态列表
		commodityList: [], //原始商品列表,用于首次进入此页面加载全部商品
		commodityList2: [], //展现的商品
		current: 1, //默认全部
		tabs: [], //商品分类导航
		isActive: -1, //0新品，1价格升序，2价格降序
		commodityList3: [], //用于筛选后，将导航栏上的某个分类重新赋值
	}),
	methods: {
		// 获取商品
		getCommodity() {},
		// 转换时间
		shijianc(time) {
			let date = new Date(time);
			let Y = date.getFullYear() + "-";
			let M =
				(date.getMonth() + 1 < 10
					? "0" + (date.getMonth() + 1)
					: date.getMonth() + 1) + "-";
			let D =
				(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
			let h =
				(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
			let m =
				(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
				":";
			let s =
				date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		},
		//跳转搜索页面
		toSelectCommodity(e) {
			// uni.navigateTo({
			// 	url: "/pages/exchange/selectCommodity?id=" + e,
			// });
		},
		// 导航栏选择
		chooseTabs(it) {
			this.commodityList2 = this.commodityList.sort((a, b) => {
				return a.id - b.id;
			}); //恢复不排序
			this.current = it.id;
			this.isActive = -1;
			// console.log(this.current,'id');
			if (this.current == 1) {
				this.commodityList2 = this.commodityList;
				// console.log('执行了',this.commodityList);
			} else {
				this.commodityList2 = this.commodityList.filter((p) => {
					return this.current == p.goods_class_id;
				});
			}
			this.commodityList3 = this.commodityList2;
			// console.log(this.commodityList3,'数组');
		},
		//最新
		latest() {
			this.commodityList2 = this.commodityList.sort((a, b) => {
				return a.id - b.id;
			}); //恢复不排序
			this.isActive = 0;
			if (this.current == 1) {
				this.commodityList2 = this.commodityList.filter((p) => {
					return p.new_product == 1;
				});
				// console.log( this.commodityList2,'this.current');
			} else {
				this.commodityList2 = this.commodityList3.filter((p) => {
					return p.new_product == 1;
				});
			}
			// console.log(this.commodityList3,'最新');
		},
		//价格排序
		priceSort() {
			if (this.isActive < 1) {
				this.isActive = 1;
				if (this.current == 1) {
					this.commodityList2 = this.commodityList.sort((a, b) => {
						return a.exchange_integral - b.exchange_integral;
					});
					// console.log( this.commodityList2,'this.current');
				} else {
					this.commodityList2 = this.commodityList3.sort((a, b) => {
						return a.exchange_integral - b.exchange_integral;
					});
				}
			} else if (this.isActive == 1) {
				this.isActive = 2;
				if (this.current == 1) {
					this.commodityList2 = this.commodityList.sort((a, b) => {
						return b.exchange_integral - a.exchange_integral;
					});
					// console.log( this.commodityList2,'this.current');
				} else {
					this.commodityList2 = this.commodityList3.sort((a, b) => {
						return b.exchange_integral - a.exchange_integral;
					});
				}
			} else if (this.isActive == 2) {
				this.isActive = 1;
				if (this.current == 1) {
					this.commodityList2 = this.commodityList.sort((a, b) => {
						return a.exchange_integral - b.exchange_integral;
					});
					// console.log( this.commodityList2,'this.current');
				} else {
					this.commodityList2 = this.commodityList3.sort((a, b) => {
						return a.exchange_integral - b.exchange_integral;
					});
				}
			}
		},
		//跳转商品详情页
		toProductDescription(item) {
			// uni.navigateTo({
			// 	url:
			// 		"/pages/exchange/productDescription?data=" +
			// 		encodeURIComponent(JSON.stringify(item)),
			// });
		},
		//跳转到购物车
		toShoppingCar() {
			// uni.navigateTo({
			// 	url: "/pages/exchange/shoppingCar",
			// });
		},
		//添加商品
		addNum(it) {
			var _self = this;
			let inventory = parseInt(it.goods_num);
			if (inventory != 0) {
				console.log();
			} else {
				// wx.showToast({
				// 	title: "库存不足",
				// 	icon: "none",
				// });
			}

			// console.log('添加了');
		},
		// 获取购物车数据
		getShoppingCart() {},
	},
};
</script>
